<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useStore } from '@/store/index.js';
  import { useStyleStore } from "@/store/styleStore.js";
  import router from "@/router/index.js";
  import { ElMessage } from "element-plus";
  import CollectItem from "@/components/index/CollectItem.vue";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";
  import ObjectUtil from "@/utils/ObjectUtil.js";

  let store = useStore();
  let styleStore = useStyleStore();

  onMounted(() => {
    // 初始化收藏列表数据
    console.log('initialize collectionList ...')
    store.collection.method.loadCollectionList();
  });

  // 收藏项点击事件
  const clickItem = (event, item) => {
    // 判断当前点击收藏项是否为新增按钮收藏项
    if (!item.isAdd) {
      // 非新增按钮，直接跳转到新页面
      window.open(item.url);
    } else {
      // 为新增按钮，判断是否登录，未登录则跳转到新登录页
      if (!LocalStoreUtil.isLogin()) {
        // 跳转到登录页
        router.replace('/login');
        // 重置所有样式状态
        styleStore.comment.method.initAllStatus();
      } else {
        // 计算当前点击位置，设置操作收藏项弹窗打开位置坐标
        styleStore.collect.method.calculatePlace(event.clientX, event.clientY, window.innerWidth, window.innerHeight);
        // 打开收藏项操作弹窗组件
        styleStore.collect.method.openOperationAlert(0);
      }
    }
  }

  // 收藏项右击事件
  const contextmenuItem = (event, item) => {
    // 取消默认冒泡事件
    styleStore.comment.method.globalOffParentDefault(event);

    // 判断用户是否未登录，未登录则提醒用户登录
    if (!LocalStoreUtil.isLogin()) {
      ElMessage.warning('您尚未登录，请您先登录');
      return;
    }

    // 判断是新增收藏项按钮 和 默认收藏项，是则不需要任何操作
    if (item.isAdd || item.isDefault) {
      styleStore.collect.method.closeOperationAlert();
      return;
    }

    // 设置当前收藏项数据到状态库中
    store.collect.currentItemData = ObjectUtil.clearRef(item);

    // 计算当前点击位置，设置操作收藏项弹窗打开位置坐标
    styleStore.collect.method.calculatePlace(event.clientX, event.clientY, window.innerWidth, window.innerHeight);

    // 收藏项操作弹窗组件置顶
    styleStore.collect.method.openOperationAlert(1);
  }

</script>

<template>
  <!-- 收藏列表最外层盒子 -->
  <div :class="['collection-basic', styleStore.collect.top ? 'collect-show-animation':'collect-hide-animation']">
    <div class="collection-item-basic-parent">

      <CollectItem
          v-for="(item, index) in store.collection.collectionList" :key="item.id" :data="item" @click.stop="clickItem($event, item)"
          @contextmenu.stop="contextmenuItem($event, item)"></CollectItem>

    </div>
  </div>

</template>

<style scoped>

  /* 收藏列表最外层盒子基本样式 */
  .collection-basic {
    width: 912px;
    height: 60vh;
    overflow: auto;
    overflow-y: scroll;
    margin: 0 auto;
    position: absolute;
    top: 198px;
    left: calc(50% - 456px);
    transition: all .3s;
    border-radius: 20px;
  }

  /* 收藏项外层盒子基础样式 */
  .collection-item-basic-parent {
    width: 100%;
    overflow: hidden;
  }

  /* 收藏项通用样式 */
  .collection-item-basic-parent>div {
    float: left;
    margin: 8px 26px;
  }

  .collect-show-animation {
    animation-name: showAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }
  .collect-hide-animation {
    display: none;
    animation-name: hideAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  @keyframes showAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes hideAnimation {
    from {
      display: block;
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

</style>